<template>
  <div>
    <div style="text-align:left">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="按需查询">
          <el-input v-model="map.findid" placeholder="档案号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="map.findname" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="map.findphone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selbespeakall(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="page.rows" border style="width: 100%">
        <el-table-column prop="besId" label="档案号" width="160" fixed="left"></el-table-column>
        <el-table-column prop="besName" label="姓名" width="160"></el-table-column>
        <el-table-column prop="besPhone" label="手机号码" width="180"></el-table-column>
        <el-table-column prop="besTypeId" label="体检类型" width="160"></el-table-column>
        <el-table-column prop="besTime" label="体检时间" width="170"></el-table-column>
        <el-table-column prop="besComplete" label="体检状态" width="128" :formatter="formatterComplete"></el-table-column>
        <el-table-column prop="besIsUpload" label="报告状态" width="128" :formatter="formaterUpload"></el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="appointmentdetails(scope.row.besId)"><i class="el-icon-zoom-in"></i>预约详情</el-button>
            <el-button type="text" @click="clickUpload(scope.row)" v-show="scope.row.besComplete == 0 && scope.row.besIsUpload==0">
              <i class="el-icon-s-promotion"></i>体检上传</el-button>
            <el-button type="text" v-show="scope.row.besIsUpload==1" @click="showUpload(scope.row)"><i class="el-icon-view"></i>查看体检报告</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 9, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
        </el-pagination>
    </div>

    <!-- 显示预约详情 -->
    <el-dialog title="详情" :visible.sync="details" width="60%" center>
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          姓名
        </template>
        {{bespeak.besName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          手机号
        </template>
        {{bespeak.besPhone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          性别
        </template>
        {{bespeak.besGender}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          年龄
        </template>
        {{bespeak.besAge}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          出生日期
        </template>
        {{bespeak.besBirthday}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          所用账号
        </template>
        {{bespeak.member.memName}}
      </el-descriptions-item>
    </el-descriptions>
    <el-card class="box-card" style="font-size: 17px">
      <div slot="header" class="clearfix">
        <span>体检套餐：{{bespeak.bespeakSetMeal.besSmName}}</span>
      </div>
      <div>
        <el-table :data="bespeak.bespeakSetMeal.list" height="200" border style="width: 100%">
          <el-table-column prop="besProName"  label="项目名称" width="230"> </el-table-column>
          <el-table-column prop="besProPrice" label="项目价格" width="180"> </el-table-column>
          <el-table-column prop="bespeakPojectType.besProTypeName" label="项目类型"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="details = false">返 回</el-button>
    </span>
    </el-dialog>

    <!-- 体检上传 -->
    <el-dialog title="体检结果上传" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-descriptions title="确认会员信息">
          <el-descriptions-item label="姓名">{{uploadBes.besName}}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{uploadBes.besAge}}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{uploadBes.besPhone}}</el-descriptions-item>
          <el-descriptions-item label="性别">{{uploadBes.besGender}}</el-descriptions-item>
          <el-descriptions-item label="预约体检日期">{{uploadBes.besTime}}</el-descriptions-item>
      </el-descriptions>
      <el-form label-position="right" ref="ruleForm" :rules="rules" label-width="150px" :model="addUpload" style="margin-top:23px">
        <el-form-item label="体检结果选择" style="text-align:left">
          <el-select v-model="addUpload.besResultNormal" filterable>
            <el-option v-for="item in classifications" :key="item.perClassId" :label="item.perClassName" :value="item.perClassId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="体检结果描述" prop="besResultContent" style="margin-top:23px;">
          <el-input v-model="addUpload.besResultContent" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="体检结果文件" prop="besResultZip" style="margin-top:23px;">
          <el-input v-model="addUpload.besResultZip" type="file" id="input1" accept=".pdf,.PDF"></el-input>
        </el-form-item>
        <el-form-item label="是否需要干预" style="margin-top:23px;text-align:left">
          <el-select v-model="addUpload.besResultHealth">
            <el-option label="干预" value="1"></el-option>
            <el-option label="不干预" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">提交体检结果</el-button>
      </span>
    </el-dialog>

    <!-- 查看体检结果详情 -->
    <el-dialog title="查看体检结果详情" :visible.sync="dialogVisibleWatch" width="60%">
      <el-descriptions title="基本信息" border>
          <el-descriptions-item label="编号">{{watchUpload.besResultId}}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{watchUpload.besResultName}}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{watchUpload.besResultAge}}</el-descriptions-item>
          <el-descriptions-item label="性别">{{watchUpload.besResultGender}}</el-descriptions-item>
          <el-descriptions-item label="是否需要干预">{{watchUpload.besResultHealth === 0 ? '不干预' : '干预'}}</el-descriptions-item>
          <el-descriptions-item label="体检上传时间">{{watchUpload.besResultCreateTime}}</el-descriptions-item>
          <el-descriptions-item label="体检结果" :span="3">{{watchUpload.besResultNormal}}</el-descriptions-item>
          <el-descriptions-item label="体检结果描述" :span="3">{{watchUpload.besResultContent}}</el-descriptions-item>
          <el-descriptions-item label="如需查看项目检测详情报告，请下载文件查看">
            <el-link :href="'http://192.168.43.183/files/'+watchUpload.besResultZip" target="_blank" type="primary">查看体检报告详情</el-link>
          </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWatch = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default ({
  name: 'Upload',
  data () {
    return {
      details: false,
      map: {
        index: '',
        findid: '',
        findname: '',
        findphone: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      bespeak: {
        member: {
          memName: ''
        },
        bespeakSetMeal: {
          besSmName: ''
        }
      },
      dialogVisible: false,
      uploadBes: {},
      addUpload: { besResultNormal: 0, besResultHealth: '1' },
      classifications: [],
      dialogVisibleWatch: false, // 查看结果的对话框
      watchUpload: {}, // 体检结果对象
      rules: {
        besResultContent: [
          { required: true, message: '请输入结果描述', trigger: 'blur' }
        ],
        besResultZip: [
          { required: true, message: '请选择体检文件进行上传', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 初始化表格数据的方法
    selbespeakall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      axios.post('/api/DHBespeakResultController/selbespeakall', this.map).then(result => {
        this.page = result.data
        this.showbesTypeId()
      })
      this.$axios.post(`/api/DHBespeakResultController/queryClassificationAll`).then(({data}) => {
        this.classifications = data
      })
    },
    // 格式化状态和上传状态
    formatterComplete (row, column, cellValue, index) {
      return row.besComplete === 0 ? '进行中' : '已完成'
    },
    formaterUpload (row, column, cellValue, index) { return row.besIsUpload === 0 ? '未上传' : row.besIsUpload === 1 ? '已上传' : '未知' },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.selbespeakall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.selbespeakall()
    },
    // 格式化体检类型
    showbesTypeId () {
      this.page.rows.forEach((e, i) => {
        switch (e.besTypeId) {
          case 1 :
            e.besTypeId = '入职体检'
            break
          case 2 :
            e.besTypeId = '健康体检'
            break
          case 3 :
            e.besTypeId = '从业体检'
            break
          case 4 :
            e.besTypeId = '征兵体检'
            break
          case 5 :
            e.besTypeId = '学生体检'
            break
          case 6 :
            e.besTypeId = '职业病体检'
            break
        }
      })
    },
    appointmentdetails (val) {
      axios.get('/api/bespeak/appointmentdetails/' + val).then(result => {
        this.bespeak = result.data
      })
      this.details = true
    },
    // 关闭体检上传的对话框的回调函数
    handleClose (done) {
      this.$confirm('确认关闭体检上传吗？', '提示', { type: 'waring' })
        .then(_ => {
          done()
        })
        .catch(_ => {
          this.$message('已取消关闭')
        })
    },
    // 点击体检上传打开对话框
    async clickUpload (row) {
      let flag1 = false
      let flag2 = false
      let flag3 = false
      await this.$axios.post(`/api/DHHealthManagerController/queryByMemIdConstitutionTest?memId=${row.memId}`).then(({data}) => {
        if (data == null || data === '' || data === 'null') {
          flag1 = false
          this.$message.error('请先完成体质测评！')
        } else {
          flag1 = true
        }
      })
      await this.$axios.post(`/api/DHHealthManagerController/queryByMemIdMindTest?memId=${row.memId}`).then(({data}) => {
        if (data == null || data === '' || data === 'null') {
          flag2 = false
          this.$message.error('请先完成心理测评！')
        } else {
          flag2 = true
        }
      })
      await this.$axios.post(`/api/DHHealthManagerController/queryByMemIdRiskTest?memId=${row.memId}`).then(({data}) => {
        if (data == null || data === '' || data === 'null') {
          flag3 = false
          this.$message.error('请先完成风险测评！')
        } else {
          flag3 = true
        }
      })
      this.$nextTick(() => {
        if (flag1 === true && flag2 === true && flag3 === true) {
          this.dialogVisible = true
          this.uploadBes = row
        }
      })
    },
    // 提交体检结果的方法
    submitUpload () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          var files = document.getElementById('input1').files
          var params = new FormData()
          params.append('file1', files[0])
          const loading = this.$loading({
            lock: true,
            text: '正在努力上传体检结果报告，请稍后。请勿关闭，以免发生错误。',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          })
          this.$axios({
            url: `/api/DHBespeakResultController/submitUpload?besId=${this.uploadBes.besId}&besResultName=${this.uploadBes.besName}&besResultGender=${this.uploadBes.besGender}&besResultAge=${this.uploadBes.besAge}&besResultUploadId=${this.$store.state.user.hmId}&besResultNormal=${this.addUpload.besResultNormal}&besResultContent=${this.addUpload.besResultContent}&besResultHealth=${this.addUpload.besResultHealth}`,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then(result => {
            loading.close()
            if (result.data) {
              this.dialogVisible = false
              this.addUpload = { besResultNormal: '0', besResultHealth: '1' }
              document.getElementById('input1').value = ''
              this.$message({
                message: '上传检查报告成功！',
                type: 'success'
              })
              this.selbespeakall()
            } else {
              this.$message.error('上传检查报告失败！请稍后再试')
            }
          }).catch(erro => {
            this.$message.error('上传检查报告失败！请稍后再试')
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    // 查看上传报告
    showUpload (row) {
      this.$axios.post(`/api/DHBespeakResultController/showUpload?besId=${row.besId}`).then(({data}) => {
        this.watchUpload = data
        this.classifications.forEach((e, i) => {
          if (e.perClassId === this.watchUpload.besResultNormal) {
            this.watchUpload.besResultNormal = e.perClassName
          }
        })
        this.dialogVisibleWatch = true
      })
    }
  },
  created () {
    this.selbespeakall()
  }
})
</script>

<style scoped>
</style>
